﻿@using Weather.BLL.Entity
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
    <head>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <title>监测数据</title>
        <style>
            *{margin: 0px;padding: 0px;}
        
            body
            {
                padding: 0;
                border: solid 0px blue;
                background-color: #D1E9FA;
                /*width: 1000px;*/
                margin: 0px auto;
                color: rgb(20,20,20);
                font-family: "宋体" ,Verdana, Helvetica, Sans-Serif;
                font-size: 9pt;
            }
        
            body a{color: rgb(20,20,20);text-decoration: none;}
            body img{border: none;}
            body p{text-indent: 2em;}
            a{text-decoration: none;}
            a:hover{color: red;}
            ol, ul{list-style: none;}
            .fl
            {
                float: left;
            }
            .fr
            {
                float: right;
            }
            .b
            {
                border: 1px solid red;
            }
            .nb
            {
                border: none;
            }
            /*-- Page of AWS --*/
            .awsRightContent
            {
                position: absolute; z-index: 2; width: 100%;
                /*position: relative;
                width: 770px;
                height: 700px;
                background-color: white;
                border-right: 2px solid #2285da;
                */
            }
            /** AQI */
            .AQIPageTitle
            {
                margin-left: 10px;
                width: 100%;
                height: 30px;
                line-height: 30px;
                border: none;
                border-bottom: 1px dashed #2283D9;
                font-weight: bold;
                color: #2283D9;
            }
            .AQIKnowledgeTitle
            {
                font-weight: normal;
                margin-top: 5px;
                text-indent: 0em;
                line-height: 20px;
                color: darkcyan;
            }
            .AQIKnowledgeContent
            {
                font-size: 9pt;
                line-height: 150%;
                color: rgb(0,0,0);
            }
            .AQILegendBoxContainer
            {
                width: 12px;
                height: 14px;
                margin: 2px 3px 0px 10px;
            }
            .AQILegendBox
            {
                width: 12px;
                height: 12px;
                border: solid 1px grey;
            }
            .AQILegendText
            {
                height: 20px;
                line-height: 20px;
                border: solid 0px blue;
            }
            .nav_item {
                color:red;line-height: 30px;font-size: 18px;font-weight: bold;
                margin-left: 30px;width: 60%;filter:alpha(opacity=50);opacity:0.5;
            }
            .nav_item li {
                background-color:white;
            }
        
        </style>
        @Scripts.Render("~/bundles/jquery")
        <script src="/Scripts/hightcharts/highcharts.js"></script>
        <script type="text/javascript" src="/Scripts\date\WdatePicker.js"></script>
        <script>
            var AQIVarInfo = {
                'Total': { 'title': '总辐射', 'unit': 'W/m<sup>2</sup>' },
                'Photosynthesis': { 'title': '有效辐射', 'unit': 'UMOL/M2/S' },
                'CO2': { 'title': '二氧化碳', 'unit': 'PPM' },
                '0.5T': { 'title': '0.5M温度', 'unit': '℃' },
                '1.0T': { 'title': '1.0M温度', 'unit': '℃' },
                '2.0T': { 'title': '2.0M温度', 'unit': '℃' },
                'RH': { 'title': '相对湿度', 'unit': '%' },
                '10SW': { 'title': '10CM土壤含水率', 'unit': '%' },
                '30SW': { 'title': '30CM土壤含水率', 'unit': '%' },
            };

            var AQIClassInfo = [
                { name: '一级', valueMin: 0, valueMax: 50, color: 'RGB(0,228,0)', short: '优', descrition: '对健康影响情况：空气质量令人满意，基本无空气污染。建议采取的措施：各类人群可正常活动' },
                { name: '二级', valueMin: 51, valueMax: 100, color: 'RGB(255,255,0)', short: '良', descrition: '对健康影响情况：空气质量可接受，但某些污染物可能对极少数异常敏感人群健康有较弱影响。建议采取的措施：极少数异常敏感人群应减少户外运动' },
                { name: '三级', valueMin: 101, valueMax: 150, color: 'RGB(255,126,0)', short: '轻度污染', descrition: '对健康影响情况：易感人群症状有轻度加剧，健康人群出现刺激症状。建议采取的措施：儿童、老年人及心脏病、呼吸系统疾病患者应减少长时间、高强度的户外锻炼' },
                { name: '四级', valueMin: 151, valueMax: 200, color: 'RGB(255,0,0)', short: '中度污染', descrition: '对健康影响情况：进一步加剧易感人群症状，可能对健康人群心脏、呼吸系统有影响。建议采取的措施：儿童、老年人及心脏病、呼吸系统疾病患者避免长时间、高强度的户外锻炼，一般人群适量减少户外运动' },
                { name: '五级', valueMin: 201, valueMax: 300, color: 'RGB(153,0,76)', short: '重度污染', descrition: '对健康影响情况：心脏病和肺病患者症状显著加剧，运动耐受力降低，健康人群普遍出现症状。建议采取的措施：儿童、老年人及心脏病、肺病患者应停留在室内，停止户外运动，一般人群减少户外运动' },
                { name: '六级', valueMin: 300, valueMax: 999, color: 'RGB(126,0,35)', short: '严重污染', descrition: '对健康影响情况：健康人群运动耐受力降低，有明显强烈症状，提前出现某些疾病。建议采取的措施：儿童、老年人及心脏病、肺病患者应停留在室内，避免体力消耗，一般人群应避免户外运动' }
            ];

            var PM25ClassInfo = [
                { name: '一级', valueMin: 0, valueMax: 35, color: 'RGB(0,228,0)', short: '优' },
                { name: '二级', valueMin: 36, valueMax: 75, color: 'RGB(255,255,0)', short: '良' },
                { name: '三级', valueMin: 76, valueMax: 115, color: 'RGB(255,126,0)', short: '轻度污染' },
                { name: '四级', valueMin: 116, valueMax: 150, color: 'RGB(255,0,0)', short: '中度污染' },
                { name: '五级', valueMin: 151, valueMax: 250, color: 'RGB(153,0,76)', short: '重度污染' },
                { name: '六级', valueMin: 251, valueMax: 999, color: 'RGB(126,0,35)', short: '严重污染' }
            ];

            function AQIGetClass(value, defInfo) {
                if (defInfo == null) return null;
                for (var i = 0; i < defInfo.length; i++) {
                    if (value >= defInfo[i].valueMin && value <= defInfo[i].valueMax)
                        return defInfo[i];
                }
                return null;
            }

            function AQIGetColor(value) {
                for (var i = 0; i < AQIClassInfo.length; i++) {
                    if (value >= AQIClassInfo[i].valueMin && value <= AQIClassInfo[i].valueMax)
                        return AQIClassInfo[i].color;
                }
                return "RGB(255,255,255)";
            }

            DateFromString = function (dateString, fmt) {
                var o = {
                    "y+": 0,
                    "m+": 1,
                    "d+": 0,
                    "H+": 0,
                    "M+": 0,
                    "S+": 0
                };

                for (var k in o) {
                    var p = new RegExp("(" + k + ")", "g");
                    if (p.test(fmt)) {
                        var v = dateString.substr(p.lastIndex - RegExp.$1.length, RegExp.$1.length);
                        while (v.indexOf("0") == 0)
                            v = v.substr(1);

                        o[k] = parseInt((v == "" ? "0" : v));
                    }
                }

                //-- Padding year 
                if (o["y+"] < 50)
                    o["y+"] = 2000 + o["y+"];
                else if (o["y+"] <= 99)
                    o["y+"] = 1900 + o["y+"];

                var dt = new Date();
                dt.setFullYear(o["y+"], o["m+"] - 1, o["d+"]);
                dt.setHours(o["H+"], o["M+"], o["S+"]);

                return dt;
            };

            Date.prototype.format = function (fmt) {
                var o = {
                    "m+": this.getMonth() + 1,
                    "d+": this.getDate(),
                    "H+": this.getHours(),
                    "M+": this.getMinutes(),
                    "S+": this.getSeconds()
                };
                while (/(y+)/.test(fmt))
                    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

                for (var k in o)
                    while (new RegExp("(" + k + ")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            };

            Date.prototype.addHour = function (n) {
                var dt = new Date();
                dt.setTime(this.getTime() + n * 60 * 60 * 1000);
                return dt;
            };

            Date.prototype.addMinute = function (n) {
                var dt = new Date();
                dt.setTime(this.getTime() + n * 60 * 1000);
                return dt;
            };

            Date.prototype.addSecond = function (n) {
                var dt = new Date();
                dt.setTime(this.getTime() + n * 1000);
                return dt;
            };

            Date.prototype.getSpanHourFrom = function (dateIn) {
                var n = (this.getTime() - dateIn.getTime()) / 1000 / 60 / 60;
                return n;
            };
        </script>
    </head>
    <body>
        <div class="awsRightContent">
        
        <div class="fl" style="width: 100%; height: 400px; text-align: left;">
            <div class="AQIPageTitle">◇&nbsp;上虞市虞南省级现代农业综合区&nbsp;
                <input type="text" id="queryZdzTime" style="width:90px" value="@ViewBag.QueryZdzTime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH'})"/>
                <input type="button" value="查询" style="width:50px;" onclick="ShowZdzData()"/>
            </div>
            <div style="width: 95%;height: 360px;margin-left:10px; line-height: 25px; border: solid 0px blue;background: url(/Content/Images/syqx/sydp.gif) no-repeat;">
                <span style="margin-left: 10%;"></span>
                <ul class="nav_item">
                    <li>总辐射：<span id="Zdz_Total"></span> W/M2</li>
                    <li>有效辐射：<span id="Zdz_Photosynthesis"></span> UMOL/M2/S</li>
                    <li>CO2：<span id="Zdz_CO2"></span> PPM</li>
                    <li>0.5M温度：<span id="Zdz_T5"></span> ℃</li>
                    <li>1.0M温度：<span id="Zdz_T10"></span> ℃</li>
                    <li>2.0M温度：<span id="Zdz_T20"></span> ℃</li>
                    <li>相对湿度：<span id="Zdz_RH"></span> %</li>
                    <li>10CM土壤含水率：<span id="Zdz_SW10"></span> %</li>
                    <li>30CM土壤含水率：<span id="Zdz_SW30"></span> %</li>
                </ul>
            </div>
        </div>
        <!-- AQI observation  -->
        <div class="fl" style="position: relative; width: 100%; height: 435px; text-align: left;">
            <div class="AQIPageTitle">◇&nbsp;观测柱状图</div>            <div style="margin-left: 10px;">
                
                日期：<input type="text" id="queryTime" style="width:65px" value="@ViewBag.QueryTime" onclick="WdatePicker()"/>
                类型：<select id="queryType">
                    <option value="Total">总辐射</option>
                    <option value="Photosynthesis">有效辐射</option>
                    <option value="CO2">二氧化碳</option>
                    <option value="RH">相对湿度</option>
                    <option value="0.5T">0.5M温度</option>
                    <option value="1.0T">1.0M温度</option>
                    <option value="2.0T">2.0M温度</option>
                    <option value="10SW">10CM土壤含水率</option>
                    <option value="30SW">30CM土壤含水率</option>
                </select>
                <input type="button" value="查询" style="width:60px;" onclick="QueryData()"/>
            </div>

            <div id="aqiTimeseries" style="margin-left: 10px;width: 95%; height: 300px; border-bottom: solid 0px grey;border-top: solid 0px grey"></div>
            
        </div>
        
    </div>
    </body>
</html>
<script>
    var weatherAqi = {};
    weatherAqi.gHourDelta = 1;
    weatherAqi.aqiType = 'Total';
    weatherAqi.stationid = 'K4501';
    weatherAqi.querytime = '';
    weatherAqi.queryzdztime = '';
    
    //----------------------------------------
    //-- Load forecast when document is loading
    //----------------------------------------
    $(document).ready(function () {
        QueryData();
        ShowZdzData();
    });


    var QueryData = function () {
        weatherAqi.aqiType = $("#queryType").val();
        weatherAqi.querytime = $("#queryTime").val();
        
        ShowAQITs();
        
    };

    var ShowZdzData = function () {
        weatherAqi.queryzdztime = $("#queryZdzTime").val() + ":00:00";
        var url = "/Wap/QueryZdzData?stationid=K4501&querytime=" + weatherAqi.queryzdztime;
        $.post(url, 0, function (jData) {
            var jResult = $.parseJSON(jData);
            $("#Zdz_Total").html(jResult.Total != null ? jResult.Total : 0);
            $("#Zdz_Photosynthesis").html(jResult.Photosynthesis != null ? jResult.Photosynthesis : 0);
            $("#Zdz_RH").html(jResult.RH != null ? jResult.RH : 0);
            $("#Zdz_CO2").html(jResult.C02 != null ? jResult.C02 : 0);
            $("#Zdz_T5").html(jResult.T5 != null ? jResult.T5 / 10 : 0);
            $("#Zdz_T10").html(jResult.T10 != null ? jResult.T10 / 10 : 0);
            $("#Zdz_T20").html(jResult.T20 != null ? jResult.T20 / 10 : 0);
            $("#Zdz_SW10").html(jResult.SW10 != null ? jResult.SW10 / 10 : 0);
            $("#Zdz_SW30").html(jResult.SW30 != null ? jResult.SW30 / 10 : 0);

        });
    };
    /**
    * Show time series of AQI related data
    */
    var ShowAQITs = function () {
        //-- Disable highcharts UTC
        Highcharts.setOptions({
            global: { useUTC: false }
        });
        var url = "/Wap/syqxweatherdata?stationid=K4501&type=" + weatherAqi.aqiType + "&querytime=" + weatherAqi.querytime;

        $.post(url, 0, function (jData) {
            var jResult = $.parseJSON(jData);
            var data = Array();
            var aqiClass = null;

            for (var i = 0; i < jResult.Times.length; i++) {
                var dt = DateFromString(jResult.Times[i], jResult.Times[i].length == 8 ? 'yyyymmdd' : 'yyyymmddHH');
                if (weatherAqi.aqiType.toUpperCase() == 'AQI')
                    aqiClass = AQIGetClass(jResult.Values[i], AQIClassInfo);
                if (weatherAqi.aqiType.toUpperCase() == "PM25")
                    aqiClass = AQIGetClass(jResult.Values[i], PM25ClassInfo);

                data.push({
                    x: dt.getTime(),
                    y: jResult.Values[i],
                    color: (aqiClass == null ? 'rgb(255,125,0)' : aqiClass.color),
                    classInfo: aqiClass
                });
            }

            $("#aqiTimeseries").highcharts({
                credits: { enabled: false },
                title: { text: "" + AQIVarInfo[weatherAqi.aqiType].title + (weatherAqi.gHourDelta > 1 ? "日平均" : "逐小时") + "监测值" },
                chart: { type: 'column' },
                xAxis: {
                    type: 'datetime',
                    tickInterval: (weatherAqi.gHourDelta > 1 ? 72 : 3) * 3600 * 1000,
                    dateTimeLabelFormats: {
                        day: '%m月%d日',
                        week: '%m月%d日',
                        month: '%m月'
                    }
                },
                yAxis: { title: { text: AQIVarInfo[weatherAqi.aqiType].title + (weatherAqi.aqiType.toUpperCase() == 'AQI' ? '' : ('(' + AQIVarInfo[weatherAqi.aqiType].unit) + ')')} },
                legend: { enabled: false },
                tooltip: {
                    formatter: function () {
                        var info = this.point.classInfo,
                            s = Highcharts.dateFormat('%Y年%m月%d日' + (weatherAqi.gHourDelta > 1 ? '' : '%H时'), this.x) + '<br/>' +
                                this.y + AQIVarInfo[weatherAqi.aqiType].unit + (info == null ? '' : (',' + info.name + "," + info.short));
                        return s;
                    }
                },
                series: [{
                    'data': data
                }]
            });
        });

    };
</script>
